<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/shangchuan.css">
</head>
<style>
    .layui-input-block {
        margin-left: 150px;
    }
</style>

<body>
    <div class="juzhong">
        <div class="dashed" id="test1">
            <span class="yi">将excel文件拖拽到此处或点击上传</span>
        </div>
    </div>
    <hr>
    <div class="layui-footer">
        <form class="layui-form" action="" style="width: 30%;">
            <div class="layui-form-item">
                <label class="layui-form-label">  <button type="button" class="layui-btn" id="btn1">开始上传</button></label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                <option value="">请选择要上传的信息</option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
              </select>
                </div>
            </div>
        </form>

        <table id="demo" lay-filter="test"></table>
    </div>

</body>
<script src="../../layui/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
<script>
    var table
    var form
    var option

    layui.use(["upload", "table", "jquery", "form"], function() {
        table = layui.table;
        form = layui.form;
        upload = layui.upload;
        option = {
                elem: '#demo',
                data: "",
                page: true, //开启分页
                size: "lg",
                limits: [10, 20, 50, 100, 200, 500],
                cols: [
                    []
                ]
            }
            // 文件上传
        upload.render({
            elem: '#test1',
            url: '',
            multiple: false,
            method: 'post',
            accept: 'file',
            auto: false,
            bindAction: "#12343213123",
            headers: {
                token: localStorage.getItem('token')
            },
            choose: function(obj) {
                obj.preview(function(index, file, result) {
                    console.log(file)
                    var fileReader = new FileReader();
                    fileReader.onload = function(ev) {
                        try {
                            var data = ev.target.result
                            console.log(ev)
                            var workbook = XLSX.read(data, {
                                    type: 'binary'
                                }) // 以二进制流方式读取得到整份excel表格对象
                            var persons = []; // 存储获取到的数据
                        } catch (e) {
                            console.log('文件类型不正确');
                            return;
                        }
                        // 表格的表格范围，可用于判断表头是否数量是否正确
                        var fromTo = '';
                        // 遍历每张表读取
                        for (var sheet in workbook.Sheets) {
                            if (workbook.Sheets.hasOwnProperty(sheet)) {
                                fromTo = workbook.Sheets[sheet]['!ref'];
                                console.log(fromTo);
                                persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                                // break; // 如果只取第一张表，就取消注释这行
                            }
                        }
                        //在控制台打印出来表格中的数据
                        console.log(persons);
                        var shuju = []
                        persons.forEach((item, index) => {
                            if (index === 0) {
                                tianjiabiaoto(item)
                            } else {
                                var yihang = {}
                                for (var key in item) {
                                    yihang[key] = item[key]
                                }
                                console.log(yihang)
                                shuju.push(yihang)
                            }
                        });
                        tianjianeirong(shuju)
                    };
                    fileReader.readAsBinaryString(file);
                });
            },
        })

    })

    function tianjiabiaoto(item) {
        console.log(item)
        var biaotou = []
        for (var key in item) {
            biaotou.push({
                field: key,
                title: item[key],
                align: 'center',
                edit: true
            })
        }
        option.cols[0] = biaotou
    }

    function tianjianeirong(data) {
        option.data = data
        console.log(option)
        console.log(JSON.stringify(option))

        table.render(option);
    }
</script>






<script>
    layui.use("layer", function() {
        var layer = layui.layer;
        var btn = document.getElementById('btn1');
        btn.onclick = function() {
            layer.open({
                title: '提示',
                type: '2',
                area: ['420px', '180px'],
                content: '<div class="neirong">如果数据存在大量重复,或者之前上传过,建议你取消<br>上传数据</div>',
                btn: ['取消', '确定'],
                shade: [0.5, '#000']
            })
        };
    });
</script>

</html>